import React from "react";

import { storiesOf } from "@storybook/react";
import { text, select, number } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'

import Select from ".";
import "./index.css";

const variants = {
  default: 'default',
  small: "small",
  large: "large",
};

const boolVariants = {
  true: true,
  false: false,
};

// const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
const options = [{ label: 'gold', value: '1' }, { label: 'lime', value: '2' }, { label: 'green', value: '3' }, { label: 'cyan', value: '4' }];

storiesOf("Select", module)
  .add("Select", () => (
    <div className='flex items-baseline'>
      <label htmlFor="username" className='flex-shrink-0'>用户名:</label>
      <Select
        // className="w-16"
        options={options}
        size={select("Size", variants, "default")}
        placeholder={text("Placeholder", "请输入")}
        defaultValue={text("DefaultValue", "I am a Select")}
        // value={text("Value", "1")}
        disabled={select("Disabled", boolVariants, false)}
        showSearch={select("ShowSearch", boolVariants, false)}
        listHeight={number('ListHeight', 8)}
        onChange={() => console.log('onChange')}
        onSelect={() => console.log('onSelect')}
        onBlur={() => console.log('onBlur')}
      // style={{ width: 200 }}
      />
    </div>
  ));
